<template>
  <div>
    <h1 style="font-size:18px;">Breadcrumb 面包屑</h1>
    <p>显示网站的层级结构，告知用户当前所在位置，以及在需要向上级导航时使用。</p>
    <h2 style="font-size:14px;">基础用法</h2>
    <div class="testBreadcrumb">
      <Breadcrumb :breadcrumb="breadcrumbList"></Breadcrumb>
    </div>
    <p>
      通过设置
      <code>Breadcrumb</code> 组件的
      <code>breadcrumb</code> 属性，来定义组件的层级名称和跳转路径。
    </p>
    <p>
      <code>breadcrumb</code> 属性是一个
      <code>json</code> 数组，其中的
      <code>path</code> 对应的为跳转路径，
      <code>name</code> 对应的是层级名称。
    </p>
    <p>
      <code>breadcrumb</code> 默认为空，为空时
      <code>Breadcrumb</code> 组件将不会显示。
    </p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Breadcrumb :breadcrumb=&quot;breadcrumbList&quot;&gt;&lt;/Breadcrumb&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            breadcrumbList:[
              {
              path:'/docs',
              name:'一级目录'
              },
              {
              path:'/breadcrumb',
              name:'二级目录'
              },
              {
              path:'/breadcrumb',
              name:'三级目录'
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">带图标的</h2>
    <div class="testBreadcrumb">
      <Breadcrumb :breadcrumb="breadcrumbList" showIcon></Breadcrumb>
    </div>
    <p>
      给
      <code>Breadcrumb</code> 组件添加
      <code>showIcon</code> 属性，可以在组件开头添加一个
      <code>Icon</code> 图标。
    </p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Breadcrumb :breadcrumb=&quot;breadcrumbList&quot; showIcon&gt;&lt;/Breadcrumb&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            breadcrumbList:[
              {
              path:'/docs',
              name:'一级目录'
              },
              {
              path:'/breadcrumb',
              name:'二级目录'
              },
              {
              path:'/breadcrumb',
              name:'三级目录'
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">分隔符</h2>
    <div class="testBreadcrumb">
      <Breadcrumb :breadcrumb="breadcrumbList" showIcon separator></Breadcrumb>
    </div>
    <p>
      给
      <code>Breadcrumb</code> 组件添加
      <code>separator</code> 属性，可以把默认分隔符
      <code>/</code> 修改为
      <code>&gt;</code> 。
    </p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Breadcrumb :breadcrumb=&quot;breadcrumbList&quot; showIcon separator&gt;&lt;/Breadcrumb&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            breadcrumbList:[
              {
              path:'/docs',
              name:'一级目录'
              },
              {
              path:'/breadcrumb',
              name:'二级目录'
              },
              {
              path:'/breadcrumb',
              name:'三级目录'
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2 style="font-size:14px;">API</h2>
    <p>Breadcrumb props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
  </div>
</template>

<script>
export default {
  name: 'test-breadcrumb',
  data () {
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'breadcrumb',
          explain: '用于展示组件的层级名称和路径',
          type: 'Array',
          default: '[ ]'
        },
        {
          attribute: 'showIcon',
          explain: '组件是否以Icon图标开头',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'separator',
          explain: '是否使用 > 作为分割线',
          type: 'Boolean',
          default: 'false'
        }
      ],
      breadcrumbList: [
        {
          path: '/docs',
          name: '一级目录'
        },
        {
          path: '/breadcrumb',
          name: '二级目录'
        },
        {
          path: '/breadcrumb',
          name: '三级目录'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
p {
  padding: 10px 0;
}
.testBreadcrumb {
  width: 500px;
  height: 50px;
  display: flex;
  align-items: center;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
</style>
